<template>
	<view class="my-login">
		<view class="login-box">
			<uni-icons type="contact-filled" size="100"  color="gray"/>
			<button class="login-button" type="default" open-type="getUserInfo" @getuserinfo="getUserMessage">一键登录</button>
			<view class="login-text">
				登陆后尽享更多权益
			</view>
			<view class="login-bottom">
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		methods:{
			...mapMutations('m_user',['getUserDetails','getUserToken']),
			// 用户登录同时拿到用户信息
			getUserMessage(e){
				if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showToast('您取消了授权');
				this.getUserDetails(e.detail.userInfo);
				this.getToken(e.detail);
			},
			// 发送请求拿到token
			async getToken(detail){
				// 请求参数对象
				const queryObj = {
					code: '',
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					rawData: detail.rawData,
					signature: detail.signature,
				};
				// 使用uni.login 获得code
				uni.login({
					success(msg) {
						if(msg.errMsg !== "login:ok") return uni.$showToast('登录失败');
						queryObj.code = msg.code;
					},
					fail(err) {
						return uni.$showToast('登录失败');
					}
				});
				// 发送请求获取token
				const { data : res } = await uni.$http.post('/api/public/v1/users/wxlogin',queryObj);
				// 正确的做法
				// if(res.meta.status !== 200) return uni.$showToast('登录失败');
				// this.getUserToken(res.message.token);
				// ---------------------------------------------------------------------
				
				// 该接口拿不到token值，设置一个假token方便后续开发
				// const token = '';
				// if(!token) return uni.$showToast('登录失败');
				const token = "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEyLCJpYXQiOjE1MjU0MDIyMjMsImV4cCI6MTUyNTQ4ODYyM30.g-4GtEQNPwT_Xs0Pq7Lrco_9DfHQQsBiOKZerkO-O-o";
				this.getUserToken(token);
				uni.switchTab({
					url:'../../pages/cart/cart'
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #fff;
	.my-login{
		.login-box{
			background-color: #F8F8F8;
			text-align: center;
			width: 100%;
			padding-top: 190rpx;
			overflow: hidden;
			.login-button{
				width: 90%;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				background-color: #c00000;
				border-radius: 23px;
				color: #fff;
			}
			.login-text{
				font-size: 24rpx;
				color: gray;
				padding-bottom: 60rpx;
			}
			.login-bottom{
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 50%;
				transform: translateY(50%);
			}
		}
	}
}
</style>
